<!-- html -->
<template>
  <h2 class="h2">toRef，复制单个属性并转成ref对象</h2>
  <span class="span2">num1：</span>
  <input class="input1" type="number" v-model="nums.num1">
  <span class="span2">num2：</span>
  <input class="input1" type="number" v-model="nums.num2">
  <button class="button1" @click="changeNum1">修改num1</button>
  <button class="button1" @click="showSum">查看和</button>
  <hr class="hr1">
  <span class="span2">obj：{{ obj }}</span>
  <button class="button1" @click="changeObj">修改obj</button>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'toRefTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { reactive, toRef } from 'vue'
//数据
let nums = reactive({ num1: 1, num2: 1 })
let obj = 666
let num1Ref = toRef(nums, 'num1')
let num2Ref = toRef(nums, 'num2')
let objRef = toRef(obj)
console.log('num1Ref：', num1Ref)
console.log('num2Ref：', num2Ref)
console.log('objRef：', objRef)
//方法
function changeNum1() {
  num1Ref.value += 1
  console.log('num.num1：', nums.num1)
  console.log('num1Ref', num1Ref.value)
}
function showSum() {
  alert(num1Ref.value + num2Ref.value)
}
function changeObj() {
  objRef.value = 999
  console.log('obj：', obj)
  console.log('objRef：', objRef.value)
}
</script>

<!-- 样式 -->
<style scoped></style>